<template>
  <div class="application-form-container">
    <h1 style="font-size: 24px;">准入申请单</h1>
    <!-- 申请表单 -->
    <el-form :model="applicationForm" :rules="rules" ref="applicationForm" label-width="140px" label-position="left" class="custom-form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="申请流水号">
            <el-input v-model="applicationForm.applicationId" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码" prop="creditCode">
            <el-input v-model="applicationForm.creditCode" :disabled="!isEditing"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="applicationForm.companyName" :disabled="!isEditing"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人代表" prop="legalRepresentative">
            <el-input v-model="applicationForm.legalRepresentative" :disabled="!isEditing"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="申请人" prop="applicant">
            <el-input v-model="applicationForm.applicant" :disabled="!isEditing"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="applicationForm.phone" :disabled="!isEditing"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="申请原因" prop="reason">
            <el-input type="textarea" v-model="applicationForm.reason" :disabled="!isEditing"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="公司主营业务" prop="mainBusiness">
            <el-input type="textarea" v-model="applicationForm.mainBusiness" :disabled="!isEditing"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="附件上传" prop="files">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="applicationForm.files"
              :disabled="!isEditing"
            >
              <el-button size="small" type="primary" v-if="isEditing">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input type="textarea" v-model="applicationForm.remark" :disabled="!isEditing"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24" class="form-buttons" v-if="isEditing">
          <el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      applicationForm: {
        applicationId: 'APP' + Math.floor(Math.random() * 10000), // 模拟生成申请流水号
        companyName: '',
        legalRepresentative: '',
        creditCode: '',
        files: [],
        reason: '',
        remark: '',
        applicant: '',
        phone: '',
        mainBusiness: '' // 新增公司主营业务字段
      },
      rules: {
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        legalRepresentative: [
          { required: true, message: '请输入法人代表', trigger: 'blur' }
        ],
        creditCode: [
          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请输入申请原因', trigger: 'blur' }
        ],
        applicant: [
          { required: true, message: '请输入申请人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        mainBusiness: [ // 新增公司主营业务验证规则
          { required: true, message: '请输入公司主营业务', trigger: 'blur' }
        ]
      },
      isEditing: false // 新增标识符
    };
  },
  created()  {
    // 假设从路由参数获取询单ID
    const inquiryId = this.$route.query.id;;
    this.isEditing = this.$route.query.type==='detail'?false:true;
    
    if (inquiryId) {
      // 这里可以添加根据询单ID获取询单详情的逻辑
      this.applicationForm = {
        applicationId: inquiryId,
        creditCode: '123421321',
        companyName: '三支有限公司',
        legalRepresentative: '张三',
        applicant: '张三',
        reason: '根据公司业务需要，申请准入',
        files: [],
        phone: '13800138000',
        remark: '请尽快发货',
        mainBusiness: '电子产品制造' // 新增公司主营业务示例数据
      };
    }
  },
  methods: {
    // 提交表单
    handleSubmit() {
      let that = this;
      this.$refs.applicationForm.validate((valid) => {
        if (valid) {
          that.loading = true;
          // 这里可以添加提交退款申请的逻辑
          setTimeout(() => {
            that.$message({
              message: '退款申请已提交',
              type: 'success'
            });
            that.$router.push({ path: '/home/myOrder' });
            that.loading = false;
          }, 1000);
          that.$message({
            message: '提交成功!',
            type: 'success'
          });
        } else {
          this.$message({
            message: '请检查表单填写',
            type: 'error'
          });
          return false;
        }
      });
    },
    // 重置表单
    handleReset() {
      this.$refs.applicationForm.resetFields();
      this.$message({
        message: '表单已重置',
        type: 'info'
      });
    },
    // 上传文件预览
    handlePreview(file) {
      console.log(file);
    },
    // 删除文件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 删除前确认
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    // 文件数量超出限制时的钩子
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${ files.length } 个文件，共选择了 ${ files.length + fileList.length } 个文件`);
    }
  }
};
</script>

<style scoped>
.application-form-container {
  padding: 20px;
}

.custom-form {
  margin: 20px 0;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  width: 100%;
}

.el-textarea {
  width: 100%;
}

.form-buttons {
  text-align: right;
  padding-right: 10px;
}
</style>